#{extends 'master.html' /}
#{set 'moreScripts'}
<script language="javascript" type="text/javascript">
    var getStatusUrl = '@{getStatus(crawlerName)}';
</script>
<script src="@{'/public/javascripts/crawlerStatus.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/progressbar.css'}"/>
#{/set}

<div class="page-block">
    <h2>&{'Crawler.crawlerStatus.title'}</h2>
    <div id="updateBox">
        <div>
            <div>
                <h4>&{'Crawler.crawlerStatus.productsProcessed'}</h4>
                Товар номер <span id="productIndex">${webSiteInfo.productIndex}</span> из <span
                    id="totalProductsCount">${webSiteInfo.productsCount}</span>

            </div>
        </div>
        <br/>
        &{'Crawler.crawlerStatus.categoryNumber'} <span id="categoryIndex">${webSiteInfo.categoryIndex}</span> из <span
            id="totalCategoriesCount">${webSiteInfo.categoriesCount}</span>

        <div class="meter-wrap" style="border: 1px solid #999999">
            <div class="meter-value" id="overallProgress" style="background-color: #0a0; width: ${categoryPercent}%;">
                <div class="meter-text" id="overallProgressText">
                    ${categoryPercent}%
                </div>
            </div>
        </div>
        <br/>

        <div>
            <h4>&{'Crawler.crawlerStatus.productInCategory'}</h4>

            <div><a id="productTitle" href="${productsCategory.childPathElement.url}">${productsCategory.childPathElement.title}</a>
            </div>

        </div>
        &{'Crawler.crawlerStatus.productNumber'} <span id="categoryProductIndex">${productsCategory.childIndex}</span>
        &{'Crawler.crawlerStatus.productFrom'} <span
            id="totalCategoryProductsCount">${productsCategory.itemsCount}</span>
        &{'Crawler.crawlerStatus.productInThisCategory'}

        <div class="meter-wrap" style="border: 1px solid #999999">
            <div class="meter-value" id="categoryProgress" style="background-color: #0a0; width: ${productsPercent}%;">
                <div class="meter-text" id="categoryProgressText">
                    ${productsPercent}%
                </div>
            </div>
        </div>
        <br/>
        <h4>&{'Crawler.crawlerStatus.currentCategory'}</h4>

        <div id="sitePath">
            <ul>
                #{sitePath model:webSiteInfo.currentSitePath /}
            </ul>
        </div>

        <div id="errorWrap" style="display: none">
            <h4>&{'Crawler.crawlerStatus.errors'}</h4>

            <div id="error" style="color: red">


            </div>
        </div>
    </div>
    <a href="@{stopCrawler(crawlerName)}">&{'Crawler.crawlerStatus.stop'}</a>
    <br/>
    <a href="@{resumeSession(crawlerName)}">&{'Crawler.crawlerStatus.start'}</a>
</div>